import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../../action"
import {Button,message} from "antd"
import {useEffect} from "react"
import {useNavigate} from "react-router-dom"
import { CountDown } from 'react-vant';

function Testpaper() {
   const navigate = useNavigate()
   let dispatch = useDispatch()
   let store = useSelector((state)=>{
       return {
           ...state.Homereducer
       }
   })
  useEffect(()=>{
    dispatch(action.getlist())
    dispatch(action.getduolist())
  },[])
  let radiofn = (id,index,bigid)=>{
        dispatch(action.radioFn(id,index,bigid))
  } 
  let goPgae = ()=>{
      if ( store.allchecked && store.allduochecked) {
            message.success("您已经作答完毕，即将跳转页面")
            navigate("/anser")
      } else {
          alert("您没有作答完毕，请你继续作答")
      }
  }
  let onfish = ()=>{
      alert("考试已经已经结束，您不能在答题了")
      navigate("/anser")
  }
  let checkboxfn = (id,index)=>{
    dispatch(action.checkboxFn(id,index))
  }
  return (
    
    <div style={{ overflowY:"auto"}}>
        <h3>考试结束时间：<CountDown time={ 30 * 60 * 1000} onFinish={onfish} /></h3>
        <h3>单选题</h3>
        {
            store.arr && store.arr.length ? store.arr.map((item,index)=>{
                return <div key={index}>
                     <p>第{index+1}题 ：{item.tit}</p>   
                     <div>选项 :
                          {
                              item.answer && item.answer.length?  item.answer.map((v,i)=>{
                                  return <div key={i}><label><input type="radio" name={item.id} value={v.title} onChange={()=>radiofn(v.id,i,item.id)}/> {v.tit}</label></div>
                              }):"暂无选项"
                          }
                     </div>
                </div>
            }):"暂无试题"
        }
        <h3>多选题</h3>
        {
            store.duoarr && store.duoarr.length ? store.duoarr.map((item,index)=>{
                return <div key={index}>
                     <p>第{index+1}题 ：{item.tit}</p>   
                     <div>选项 :
                          {
                              item.answer && item.answer.length?  item.answer.map((v,i)=>{
                                  return <div key={i}><label><input type="checkbox" name={item.id} value={v.title} onChange={()=>checkboxfn(v.id,i)}/> {v.tit}</label></div>
                              }):"暂无选项"
                          }
                     </div>
                </div>
            }):"暂无试题"
        }
        <Button onClick={goPgae}>提交</Button>
    </div>
  )
}

export default Testpaper